<template>
  <div class="app-container">
    <FileUpload
      ref="fileUpload"
      :fileSize="fileSize"
      :value="fileList"
      :fileType="fileType"
      @input="uploadSuccess"
      @delete="deleteFile"
      fileTypeParams="docs"
      :historyAttr="historyAttr"
    ></FileUpload>
    <!-- 文件列表 -->
    <transition-group
      v-if="false"
      class="upload-file-list el-upload-list el-upload-list--text"
      name="el-fade-in-linear"
      tag="ul"
    >
      <li
        :key="file.id"
        class="el-upload-list__item ele-upload-list__item-content"
        v-for="(file, index) in articleForm.attachment"
        @mouseenter="id = file.id"
        @mouseleave="id = null"
      >
        <!-- <el-link :href="`${file.storeName}`" :underline="false" target="_blank"> -->
        <span class="el-icon-document"> {{ file.realName || file.name }} </span>
        <!-- </el-link> -->
        <span>
          {{ conver(file.size) }}
        </span>
        <div
          class="ele-upload-list__item-content-action"
          v-if="file.status == 'success' && id != file.id"
        >
          <el-link
            :underline="false"
            :type="file.response.code == 200 ? 'success' : 'danger'"
          >
            {{ file.response.code == 200 ? "上传成功" : "上传失败" }}
          </el-link>
        </div>
        <div
          class="ele-upload-list__item-content-action"
          v-else-if="file.status == 'ready' && id != file.id"
        >
          <el-link :underline="false" type="primary">准备上传 </el-link>
        </div>
        <div
          class="ele-upload-list__item-content-action"
          v-else-if="id == file.id"
          v-hasPermi="['system:article:edit']"
        >
          <el-link
            :underline="false"
            @click="handleDelete(file, index)"
            type="danger"
            >删除
          </el-link>
        </div>
      </li>
    </transition-group>
  </div>
</template>

<script>
import { deleteArticleFiles } from "@/api/content/article";
export default {
  props: {
    articleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    attachment: {},
    historyAttr: {},
  },
  data() {
    return {
      fileType: [
        "doc",
        "docx",
        "wps",
        "xls",
        "xlsx",
        "xlt",
        "et",
        "ett",
        "ppt",
        "pptx",
        "zip",
        "rar",
        "pdf",
        "ceb",
        "txt",
        "dot",
        "wpt",
        "rtf",
        "dps",
        "dpt",
        "pot",
        "pps",
      ],
      fileSize: 200,
      id: null,
      fileList: [],
      fileListCache: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getConfigKey("sys.attach.file").then((res) => {
      this.fileSize = res.msg || 200;
    });
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    uploadSuccess(res) {
      let arr = JSON.parse(res);
      arr.map((item) => {
        // let obj =
        //   item.status == "success"
        //     ? {
        //         articleId: this.articleForm.articleId || null,
        //         id: null,
        //         realName: item.response?.realName || item.realName,
        //         sequence: null,
        //         storeName: item.response?.storeName || item.realName,
        //       }
        //     : {};

        item.articleId = this.articleForm.articleId || null;
      });
      this.fileListCache = arr;
      this.$emit("update:attachment", arr);
    },
    deleteFile(ids, index) {
      deleteArticleFiles({
        type: "atta",
        ids: ids,
        articleId: this.articleForm.articleId || null,
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess("文件删除成功");
          this.$refs.fileUpload.fileList.splice(index, 1);
        }
      });
    },

    //计算文件大小
    conver(limit) {
      if (!limit) return;
      var size = "";
      if (limit < 0.1 * 1024) {
        //如果小于0.1KB转化成B
        size = limit.toFixed(2) + "B";
      } else if (limit < 0.1 * 1024 * 1024) {
        //如果小于0.1MB转化成KB
        size = (limit / 1024).toFixed(2) + "KB";
      } else if (limit < 0.1 * 1024 * 1024 * 1024) {
        //如果小于0.1GB转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }

      var sizestr = size + "";
      var len = sizestr.indexOf(".");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
  },
};
</script>

<style scoped lang="scss">
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  height: 32px;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>
